<template>
  <div class="devices-search">
    <!-- 筛选 -->
    <div class="filter">
      <div class="hasSelect" v-if="showSelect">
        <span class="nor">已选条件</span>
        <span class="sel" v-if="saveData.devname" @click="alone('type')">{{saveData.devname}}</span>
        <span class="clearAll" @click="clearAll()">清除全部</span>
      </div>
      <div class="condition"> 
        <div class="area">
          <div style="width:170px;float:left;">
            <div class="classification">设备类型</div>
            <div class="all" :class="{'active':isChecktype === 0}"  @click='addTypeStatus("")'>全部</div>
          </div>
          <div style="width:calc(100% - 170px);float:left;">
            <ul class="more">
              <li>
                <span
                  :class="['spancolor',{'active':isChecktype === 1}]"
                  @click="addTypeStatus('消防栓')"
                >消防栓</span>
              </li>
              <li>
                <span
                  :class="['spancolor',{'active':isChecktype === 2}]"
                  @click="addTypeStatus('烟感设备')"
                >烟感设备</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Search',
  data: function () {
    return {
      isChecktype: 0,
      saveData: {
        // 选中设备类型
        devname: ''
      },
      // 传递的数据
      datas: {
        // 接收
        typestatus: ''
      },
      // 保存一打开的初始编码,清空用
      clear: null,
      // show
      showSelect: false
    }
  },
  watch: {
    saveData: {
      deep: true,
      handler(data){
       let flag = 0
        for(let i in this.saveData) {
          if (!this.saveData[i]) {
            flag ++
          }
        }
        if (flag !== 1) {
          this.showSelect = true;
        } else {
          this.showSelect = false;
        }
      }
    },
    datas: {
      deep: true,
      handler(data){
        // 一开始初始编码
        if (!this.clear) {
          this.clear = JSON.parse(JSON.stringify(data))
        }
        this.$emit('search_data', this.datas)
      }
    }
  },
  methods: {
    // 添加设备类型
    addTypeStatus(data){
      if (data === '') {
        this.isChecktype = 0;
      } else if (data === '消防栓') {
        this.isChecktype = 1;
      }else{
        this.isChecktype = 2;
      }
      this.saveData.devname = data;
      this.datas.typestatus = data
    },

     // 清空所有
    clearAll() {
      this.addTypeStatus('')
    },
    // 清除单个
    alone(data) {
      switch (data) {
        case 'type':
        this.addTypeStatus('')
        break
      }
    },
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
@import "../../../../../static/scss/common.scss";
.devices-search{
  margin-bottom: 24px;
  // 搜索
  .filter {
    width: 100%;
    height: auto;
    background: $white;
    padding: 0px 25px;
    box-sizing: border-box;
    margin-top: 16px;
    .active {
      background: $red;
      padding: 0px 6px;
      color: $white !important;
      border-radius: 10px;
      text-align: center;
      min-width: 22%;
    }
    .more-con.active:after {
      content: "";
      margin-left: 4px;
      vertical-align: 0px;
      border: 4px solid transparent;
      border-top-color: #fff !important;
      display: inline-block;
    }
    .hasSelect {
      cursor: pointer;
      padding-bottom: 20px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 12px;
      padding-top: 16px;
      .nor {
        font-size: 14px;
        color: $gray3;
        margin-right: 18px;
      }
      .sel {
        border: 1px solid $red;
        color:$red;
        height: 18px;
        margin-right: 10px;
        padding: 0px 20px 0px 10px;
        border-radius: 10px;
        position: relative;
      }
      .sel::after {
        position: absolute;
        display: block;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        content: " ";
        width: 15px;
        height: 8px;
        background: url("../../../../../static/image/device/sel.png") no-repeat;
      }
      .clearAll {
        color: $gray9;
      }
    }
    .condition {
      .area {
        padding: 17px 0 0;
        line-height: 20px;
        .classification {
          width: 85px;
          color: $gray3;
          font-size: 14px;
          float: left;
        }
        .all {
          // width: 60px;
          text-align: center;
          color: $gray3;
          float: left;
          font-size: 14px;
          cursor: pointer;
        }

        .more {
          color: $gray6;
          float: left;
          border-bottom: 1px solid #f0f0f0;
          width: 100%;
          padding-bottom: 6px;
          li {
            float: left;
            height: 28px;
            font-size: 14px;
            cursor: pointer;
            min-width: 120px;
            position: relative;
            .more-con,
            .spancolor {
              color: #333;
              display: inline-block;
            }
            .more-con:after {
              content: "";
              margin-left: 4px;
              vertical-align: 0px;
              border: 4px solid transparent;
              border-top-color: $gray6;
              display: inline-block;
            }
            .popover {
              display: none;
              width: 528px;
              position: absolute;
              top: 25px;
              left: 0px;
              z-index: 1000;
              cursor: auto;
              user-select: text;
              white-space: normal;
              font-size: 12px;
              line-height: 1.5;
              font-weight: 500;
              text-align: left;
              background: $white;
              box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
              border: 1px solid #e5e5e5;
              border-radius: 4px;
              .arrow {
                border-width: 5px;
                left: 26px;
                top: -10px;
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border-color: transparent transparent #e5e5e5;
                border-style: solid;
              }
              .arrow:after {
                display: block;
                width: 0;
                height: 0;
                border-style: solid;
                content: "";
                margin-top: -3px;
                margin-left: -4px;
                border-width: 4px;
                border-color: transparent transparent $white;
              }
              .p-content {
                background-color: #fff;
                background-clip: padding-box;
                border-radius: 4px;
                .popover-content {
                  padding: 24px 0 24px 24px;
                  span {
                    color: #ccc;
                    font-size: 16px;
                    cursor: default;
                    display: block;
                  }
                }
                .clear {
                  padding: 0px 24px 15px 24px;
                  width: 100%;
                  display: inline-block;
                  box-sizing: border-box;
                  li {
                    font-weight: 400;
                    min-width: 25%;
                    margin-bottom: 5px;
                    float: left;
                    line-height: 20px;
                  }
                }
              }
            }
          }
          li:hover .popover {
            display: block;
          }
        }
        .more.bb {
          border: 0;
        }
      }
      .area:after {
        content: "";
        clear: both; /*清除浮动*/
        display: block; /*确保该元素是一个块级元素*/
      }
      .area:last-child{
        border-bottom: 1px solid rgb(240, 240, 240);
      }
      .area-active{
        height: 52px;
        text-align: center;
        line-height: 52px;
        font-size: 14px;
        color: #333;
        
      }
      .area-active:hover{
        cursor: pointer;
      }
    }
  }
}
</style>
